<!--
 * @Description: 
 * @Author: Devin
 * @Date: 2021-11-11 16:09:05
 * @LastEditTime: 2021-11-11 16:09:05
 * @LastEditors: Devin
 * @Reference: 
-->
<template>
  <div
    :class="{ showDrawer: showDrawer }"
    class="config cursor-pointer"
    @click="showDrawerFun"
  >
    <i
      class="iconfont"
      :class="{ 'icon-shezhi': !showDrawer, 'icon-cuo': showDrawer }"
    ></i>
    <el-drawer
      append-to-body
      v-model="showDrawer"
      :with-header="false"
      :close-on-click-modal="false"
      custom-class="config-drawer"
      :z-index="1"
      size="250px"
    >
      <div class="item">
        <div class="item-title">主题色</div>
        <div class="theme-color">
          <el-color-picker
            v-model="color"
            color-format="rgb"
            :predefine="predefineColors"
            @change="changeThemeColor"
          />
        </div>
      </div>
      <div class="item"></div>
    </el-drawer>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, computed } from "@vue/runtime-core";
import { useStore } from "vuex";
export default defineComponent({
  name: "",
  components: {},
  setup() {
    const store = useStore();
    const state = reactive({
      showDrawer: false,
      color: getComputedStyle(document.documentElement).getPropertyValue(
        "--cc-main-color"
      ),
      predefineColors: [
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585",
      ],
    });
    /**
     * @description 打开抽屉方法
     * @param  {*}
     * @return void
     */
    const showDrawerFun = (): void => {
      state.showDrawer = !state.showDrawer;
    };

    const changeThemeColor = (color: string): void => {
      store.dispatch("changeMainColor", color);
      state.showDrawer = false;
    };
    return { ...toRefs(state), showDrawerFun, changeThemeColor };
  },
});
</script>
<style scoped lang="scss">
.config {
  position: fixed;
  top: 150px;
  right: 2px;
  z-index: 2;
  height: 40px;
  width: 40px;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  background-color: var(--cc-main-color);
  opacity: 0.5;
  color: white;
  line-height: 40px;
  text-align: center;
  transition: opacity, right 0.3s;
  i {
    font-size: 20px;
  }
  &:hover {
    opacity: 1;
  }
}
.config.showDrawer {
  right: 252px;
  opacity: 1;
}
.config-drawer {
  .item {
    &-title {
      margin-bottom: 8px;
    }
    &:not(:last-of-type) {
      padding-bottom: 20px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }
  }
}
</style>
